<template>
    <div class="note-card" :style="{'width':width, 'background-color': color[card.color] }">
        <div class="top">
            <p class="time">{{ dateOne(card.moment) }}</p>
            <p class="label">{{ label[card.type][card.label]}}</p>
        </div>
        <p class="message" @click="toDetail">
            {{ card.message }}
        </p>
        <div class="foot">
            <div class="left">
                <span class="iconfont icon-aixin1" :class="{ isLike:card.isLike[0].count > 0 }" @click="clickLike"></span>
                <span>{{ card.like[0].count }}</span>
                <span class="iconfont icon-liuyan"></span>
                <span>{{ card.commentCount[0].count }}</span>
            </div>
            <div class="name">
                <span>{{ card.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import { label,color } from '@/utils/data.js'
    import { dateOne } from '@/utils/time.js'
    import { insterFeedbackApi } from '@/api/index.js'
    export default {
        data() {
            return {
                label,
                dateOne,
                color,
                user: this.$store.state.user
            }
        },
        props: {
            width: {
                default: '325px',
                backgroundColor: 'rgba( 252, 175, 162, .3)'
            },
            note: {
                default: {},
            }
        },
        computed: {
            card() {
                return this.note;
            }
        },
        methods: {
            // 显示详情
            toDetail() {
                this.$emit('toDetail')
            },
            //
            clickLike() {
                if(this.card.isLike[0].count == 0) {
                    let data = {
                        wallId: this.card.id,
                        userId: 32,
                        type: 0,
                        moment: new Date(),
                    }
                    insterFeedbackApi(data).then(() => {
                        // 反馈
                        this.card.like[0].count++
                        this.card.isLike[0].count++
                    })
                }
            }
        }
    }
</script>   

<style lang="less" scoped>
    @font-face {
        font-family: 'YK';
        src: url('@/assets/font/font/975MaruSC-Medium.ttf');
    }

    .note-card {
        height: 240px;
        padding: 10px 20px 16px;
        box-sizing: border-box;
        background-color: rgba( 252, 175, 162, .3);
        font-family: YK;
        cursor: pointer;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 5px;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .time,
    .label {
        font-size: @font-size-14;
        color: @gray-2;
    }

    .message {
        height: 160px;
        font-size: @font-size-14;
        color: @gray-2;
        margin: 16px 0 0 0;
    }

    .foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left span{
        font-size: @font-size-14;
        color: @gray-2;
    }

    .name span {
        font-size: @font-size-14;
        color: @gray-2;
    }

    .icon-liuyan {
        margin: 0 0 0 12px;
    }

    .left span:nth-child(2),
    .left span:nth-child(4) {
        margin: 0 0 0 4px;
    }

    .icon-aixin1:hover {
        color: @like;;
    }

    .isLike {
        color: @like;
    }
</style>